<template>
  <div class="month-statistical-container">
    <div class="left-echarts-wrap">
      <el-date-picker
        class="date-picker"
        v-model="chooseMonth"
        type="monthrange"
        format="yyyy-MM"
        value-format="yyyy-MM"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="datePickerChange"
      >
      </el-date-picker>
      <div  class="chart" id="ms"></div>
    </div>
    <div class="table-wrap">
      <el-table
        class="de-table"
        :data="tableNumData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="create_by"
          label="单位名称"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          align="center"
          label="抽取数量">
          <template slot-scope="scope">
            <el-button type="text" @click="goNumDialog(scope.row)">{{scope.row.amount}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数量弹窗  -->
    <numDialog
      :numDialogVisible="numDialogVisible"
      :currentRow="currentRow"
      :tableData="detailtableData"
      @staticIndex="closeChildDialog"
      :getNumDetail="getNumDetail"
    />
  </div>
</template>

<script>
import monthStatic from './monthStatic'
import numDialog from "@/views/unit/chart/month/components/numDialog"
import {getMonthlyExtractAmount, getMonthlyTableData} from "@/api/unit/monthCharts"

export default {
  name: "MonthStatisticalIndex",
  components:{
    numDialog
  },
  data(){
    return {
      chooseMonth:'',
      tableNum:[],
      tableNumData: [{
        index: '1',
        create_by: '城市建设集团',
        date: '1',
        amount:'64'
      }, {
        index: '2',
        create_by: '产业发展公司',
        date: '1',
        amount:'35'
      }, {
        index: '3',
        create_by: '产业发展公司',
        date: '1',
        amount:'42'
      }, {
        index: '4',
        create_by: '产业发展公司',
        date: '2',
        amount:'13'
      }, {
        index: '5',
        unitName: '产业发展公司',
        date: '2',
        amount:'13'
      }],
      numDialogVisible: false,
      currentRow:{},
      detailtableData: [{
        index:1,
        extractItem: '高新区北区大学城南路及立交改造二期工程',
        extractPrice: '86000',
        unitTypeName: '招标代理',
        createBy:'重庆恒佳工程技术咨询有限公司',
        ExtractTime:'20220227'
      }, {
        index:1,
        extractItem: '高新区北区大学城南路及立交改造二期工程',
        extractPrice: '86000',
        unitTypeName: '招标代理',
        createBy:'重庆恒佳工程技术咨询有限公司',
        ExtractTime:'20220227'
      }, {
        index:1,
        extractItem: '高新区北区大学城南路及立交改造二期工程',
        extractPrice: '86000',
        unitTypeName: '招标代理',
        createBy:'重庆恒佳工程技术咨询有限公司',
        ExtractTime:'20220227'
      }, {
        index:1,
        extractItem: '高新区北区大学城南路及立交改造二期工程',
        extractPrice: '86000',
        unitTypeName: '招标代理',
        createBy:'重庆恒佳工程技术咨询有限公司',
        ExtractTime:'20220227'
      }],
      mcharts:[],
      option:{},
      draw:null,
      myChart:{}
    }
  },
  methods:{
    // 点击数字
    goNumDialog(row){
      this.numDialogVisible = true
      // 发送网络请求，获取数字弹窗展示数据
      // console.log(102,row)
      row.month = row.month.length === 1 ? row.month : '0'+ row.month
      this.currentRow = row
      this.getNumDetail(row)
    },
    // 获取详细信息
    async getNumDetail(row,extractItem = ''){
      const params = {}
      params.createby = row.create_by
      params.searchTime = row.year + '-' + row.month
      params.extractItem = extractItem
      // console.log(142,params)
      const res = await getMonthlyTableData(params)
      // console.log(res)
      this.detailtableData = res.data
      this.detailtableData.forEach((item,index) => {
        item.index = index + 1
      })
    },
    // 选择日期
    datePickerChange(val){
      // 发送网络请求，获取相应月份数据，最多选择12个月
      console.log(114,val)
      this.option.xAxis.data = []
      this.option.series[0].data = []
      const startTime = val[0]
      const endTime = val[1]
      this.loadMonthlyExtractAmount(startTime,endTime)
    },
    // 获取页面初始数据
    async loadMonthlyExtractAmount(startTime = '',endTime = ''){
      // this.myChart = {}
      const res = await getMonthlyExtractAmount({startTime,endTime})
      this.mcharts = res.data
      this.tableNumData = res.data
      this.tableNum = res.data

      this.tableNumData.forEach((item,i) => {
        item.index = i+1
        item.date = item.year + '年' + item.month + '月'
      })
        if( res.data.length > 0){
          this.myChart.hideLoading();
          this.mcharts.forEach((item) => {
            this.option.xAxis.data.push(item.year + '年' + item.month + '月')
            this.option.series[0].data.push(item.amount)
          })
        }else{
          this.myChart.showLoading({
              text: '暂无数据',
              color: '#ffffff',
              textColor: '#8a8e91',
              maskColor: 'rgba(255, 255, 255, 0.8)',
            }
          );
        }

        this.draw(this.option)

      // console.log(168,this.option)

    },
    async loadMonthlyTableData(){
      await getMonthlyTableData()
    },
    // 关闭数字弹窗
    closeChildDialog(){
      this.numDialogVisible = false
    }
  },
  created(){
  },
  mounted () {
    const container = document.querySelector('#ms')
    if (container) {
      const { myChart,option, draw,onClick } = monthStatic(container)
      this.myChart = myChart
      this.option = option
      this.draw = draw
      // 发送网络请求，获取初始数据
      this.loadMonthlyExtractAmount()
      onClick({
        eventName: "click", nodeType: "series", clickCallback: (params) => {
          const myIndex = option.xAxis.data.findIndex(item => params.name === item)
          // console.log(203,this.tableNumData)
          this.tableNumData = this.tableNum.filter((item,index) => {
            return index === myIndex
          })
          // 发送网络请求，获取右侧table展示的数据
          console.log(120,'点击了柱子',params)
        }
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.month-statistical-container{
  padding: 30px;
  display: flex;
  .left-echarts-wrap{
    flex: 2;
    .chart{
      padding-top: 30px;
      width: 500px;
      height: 450px;
    }
  }
  .table-wrap{
    flex: 4;
    padding-right: 30px;
  }
}
::v-deep .el-table--fit{
  max-height: 600px;
  overflow: auto;
}
::v-deep .el-table::before{
  background-color: unset;
}
</style>
